import React, { useState } from 'react';
import styles from './index.less';
import { Modal } from 'antd';
import upBgImg from '@/assets/programUpdate/bg.png';
import TRNotification from '@/utils/notification';

const ProgramUpdateAlert = ({}) => {
  const [visible, setVisible] = useState(true);
  const handleCancel = () => {
    if (window.__TRDEBUG__) {
      setVisible(false);
    }
  };
  return (
    <Modal
      visible={visible}
      footer={null}
      centered
      width={500}
      onCancel={handleCancel}
      wrapClassName={styles.programUpdateAlert}
      getContainer={false}
      closable={false}
    >
      <img className={styles.img} src={upBgImg} alt="" />
      <div className={styles.contentBox}>
        系统通知
        <div className={styles.content}>系统正在升级/上线，请稍后再试</div>
      </div>
    </Modal>
  );
};

class UpdateAlert {
  __key__ = '';
  show = (param) => {
    if (this.__key__.length === 0) {
      this.__key__ = String(Date.now());
      TRNotification.add({
        key: this.__key__,
        content: (
          <ProgramUpdateAlert
            {...param}
            onClose={() => {
              this.dismiss();
            }}
          />
        ),
        dismiss: this.dismiss,
      });
    }
  };
  dismiss = () => {
    if (this.__key__.length > 0) {
      TRNotification.remove(this.__key__);
      this.__key__ = '';
    }
  };
}
const feed = new UpdateAlert();
export default feed;
